<script setup lang="ts">
import type { IndustryCategoryTree } from "~/api/lndustryCategory";

defineOptions({
  name: "navBar",
});

const showPopup = ref(false);
const activeCategoryIndex = ref(0);

const handleCategoryHover = (index: number) => {
  activeCategoryIndex.value = index;
};

const { data, pending, error, refresh } = useHttp<IndustryCategoryTree[]>(
  "/product/industry-category/tree"
);

const activeCategory = computed(() => {
  return data.value[activeCategoryIndex.value] || null;
});
</script>

<template>
  <div class="nav relative">
    <div class="flex items-center">
      <img src="/assets/images/logo/logo.png" class="w-[60px] h-[60px]" />
      <div class="text-sm text-gray-400 flex items-center">
        <Icon name="icon-park-outline:local-two" class="px-4" />
        <span class="flex items-center">
          <span class="mr-2">当前定位: </span>
          <!-- 定位 -->
          <CommonLocation></CommonLocation>
        </span>
      </div>
      <div class="flex mx-6">
        <div class="item">首页</div>

        <div @mouseleave="showPopup = false">
          <div
            class="item border-primary hover:border-b-2"
            @mouseover="showPopup = true"
          >
            热门分类
          </div>

          <!-- 分类列表 -->
          <div
            :class="{
              'opacity-0 invisible ': !showPopup,
              'opacity-100 visible ': showPopup,
            }"
            class="absolute top-full left-0 right-0 bg-white shadow-lg transition-all duration-300 ease-in-out"
            style="z-index: 1000"
          >
            <div class="w-[1400px] mx-auto flex min-h-[300px]">
              <!-- 左侧分类导航 -->
              <div class="p-4 w-[240px] border-r bg-gray-50">
                <div
                  v-for="(category, index) in data"
                  :key="index"
                  class="flex items-center justify-between py-2 px-3 rounded-md mb-1 transition-colors"
                  :class="{
                    'bg-white text-primary font-bold shadow-sm':
                      activeCategoryIndex === index,
                    'hover:bg-gray-100': activeCategoryIndex !== index,
                  }"
                  @mouseover="handleCategoryHover(index)"
                >
                  <div>{{ category.name }}</div>
                  <Icon name="icon-park-outline:right" class="text-sm" />
                </div>
              </div>
              <!-- 右侧子分类 -->
              <div class="flex-1 p-6">
                <template v-if="activeCategory">
                  <div
                    v-for="(subCategory, subIndex) in activeCategory.children"
                    :key="subIndex"
                    class="mb-6"
                  >
                    <div class="text-lg font-bold text-gray-800 mb-3">
                      {{ subCategory.name }}
                    </div>
                    <ul class="grid grid-cols-6 gap-4">
                      <li
                        v-for="item in subCategory.children"
                        :key="item.id"
                        class="text-gray-600 hover:text-primary cursor-pointer transition-colors"
                      >
                        {{ item.name }}
                      </li>
                    </ul>
                  </div>
                </template>
                <div
                  v-else
                  class="text-gray-400 h-full flex items-center justify-center"
                >
                  请选择分类查看详情
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="item">企业优选</div>
        <div class="item">会员中心</div>
        <div class="item">移动端</div>
      </div>
    </div>
    <div class="flex items-center">
      <el-button>Hi！我是小浦</el-button>
      <img src="/assets/images/logo/kefu.png" class="w-[60px] h-[60px]" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.nav {
  @apply w-full h-[80px] bg-gray-200 flex items-center justify-between px-4;
  .item {
    @apply px-6 cursor-pointer h-[80px] flex items-center;
  }
}
</style>
